<template>
	<view style="width: 100%;background-color: #FFFFFF;">
        <view class="flex-content dian-show">
        	<view class="content-dian flex-content" v-for="(item,index) in carlist"  :key="index">
        		<view class="dian" :class="index==currentIndex?'selectdian':''">
        			
        		</view>
        	</view>
        </view>
		<view class="flex-content m-t-60">
			<view class="m-r-70" @click="upCurrent"   v-if="currentIndex!=0">
				<u-icon name="arrow-left" color="#4A4A4D " size="38"></u-icon>
			</view>
			<view class="m-r-70" v-else>
				<u-icon name="arrow-left" color="#fff " size="38"></u-icon>
			</view>
			<view class="">
					<swiper :current="currentIndex" style="height: 180upx; width: 330rpx;" @change="changeCar">
						<swiper-item class="car-item" v-for="(item,index) in carlist" :key="index">
							<view class="car-img flex-content">
								<image :src="item.cover" mode="widthFix"></image>
							</view>
						</swiper-item>
						</swiper>
			</view>
			<view class="m-l-70" @click="nextCurrent"  v-if="currentIndex!=carlist.length-1" >
				<u-icon name="arrow-right" color="#4A4A4D " size="38"></u-icon>
			</view>
			<view class="m-l-70" v-else>
				<u-icon name="arrow-left" color="#fff " size="38"></u-icon>
			</view>
		</view>
		<view class="car-name flex-content m-t-60">
			{{selectItem.car_name}}
		</view>
	<view class="flex-content m-t-36" style="width: 100%;">
		<view class="">
			<view class="flex-content xxl">
				{{selectItem.car_weight}}
			</view>
			<view class="weight-title flex-content m-t-10">
				最大载重
			</view>
		</view>
		<view class="m-l-40">
			<view class="flex-content xxl">
				{{selectItem.car_length}}
			</view>
			<view class="weight-title flex-content m-t-10">
				长
			</view>
		</view>
		<view class="m-l-40">
			<view class="flex-content xxl">
				{{selectItem.car_width}}
			</view>
			<view class="weight-title flex-content m-t-10">
				宽
			</view>
		</view>
		<view class="m-l-40">
			<view class="flex-content xxl">
				{{selectItem.car_height}}
			</view>
			<view class="weight-title flex-content m-t-10">
				高
			</view>
		</view>
	</view>
	<view class="flex-content m-t-70">
		

	<view class="tip-content">
		<view class="">
		 声明
		</view>
		<view class="tip-text m-t-15">
			1、一口价：运输里程费<text style="color: #E85631 ;">全程一口价</text> ，服务过程中若产生搬运费、停车费、入仓费，需用户额外支付。
		</view>
		<view class="tip-text m-t-18">
			2、特殊说明：因装卸货时间过长产生的车辆等候费，请提前与司机协商沟通。如需指定呼叫专车在运输过程中产生高速路桥费，按实际费用由用户承担。
		</view>
	</view>
		</view>
		<view class="flex-content m-t-60">
			
	
		<view class="anquan-content ">
			为保证您的货物和资金安全，如果司机以任何
			<view class="flex-content">
				形式引导线下交易，请拒绝!
			</view>
		</view>
			</view>
		
			<view class="btm-content  p-t-30">
			
			</view>
	</view>
</template>

<script>
	import {getIndexCar} from "@/api/car"
	export default {
		onLoad(opotion) {
		
		
			this.getCarList()
			this.currentIndex=opotion.id-1
		},
		data() {
			return {
				selectItem:{},
				carlist:[],
				currentIndex:0,
			};
		},
		methods:{
			nextCurrent(){
				if(this.currentIndex<this.carlist.length)
				this.currentIndex=this.currentIndex+1
			},
			upCurrent(){
			this.currentIndex=this.currentIndex-1
			},
			changeCar(cur){
				this.currentIndex=cur.detail.current
				this.selectItem=this.carlist[this.currentIndex]
			},
			async getCarList(){
				let res=await getIndexCar()
				res.data.lists.forEach(item=>{
					item.car.forEach(item=>{
						this.carlist.push(item)
					})
				})
				this.selectItem=this.carlist[this.currentIndex]
				console.log(this.selectItem);
			}
			
		}
	}
</script>

<style lang="scss" scoped>
	.tip-text{
		line-height: 45rpx;
	}

	.btm-content{
		display: flex;
		justify-content: center;
		position: fixed;
		bottom: 0px;
		width: 100%;
		height: 300rpx;
		background-image: url(https://vkceyugu.cdn.bspapp.com/VKCEYUGU-2cb47d34-0bce-4d35-acf7-2c76729b8c27/c8bf7d2a-b222-4ccb-bf18-47cda9666891.png);
		background-size: cover;
		
	}
	.btm-text{
	      color: #FFFFFF;
		width: 360rpx;
		height: 42rpx;
		background-color: #868585;
		border-radius: 40rpx;
	}
	.anquan-content{
		width: 560rpx;
	}
	.tip-content{
		color: #9D9D9D;
		
	}
	.weight-title{
		color: #686868 ;
	}
	
	.car-name{
		width: 100%;
		font-size: 44rpx;
	}
	.selectdian{
		background-color:#E85631 !important;
	}
	.car-item{
		width: 330rpx;
		height: 180rpx;
	}
	.dian-show{
		box-shadow: 0rpx 0rpx 14rpx #737272 ;
	}
.content-dian {
	width: 30rpx;
	height: 58rpx;
}
.dian{
	width: 14rpx;
	height: 14rpx;
	border-radius: 30rpx;
	background-color: #E6E5E5 ;
}
.car-img{
	image{
		width:280rpx ;
		
	}
}
.m-l-70{
	margin-left:120rpx;
}
.m-r-70{
	margin-right: 120rpx;
}
.car-img:first-child{
	image{
		width: 225rpx !important;
		
	}
}
.tip-content{
	width: 688rpx;
	
}
</style>
